import React, {
  useState,
  useRef,
  useEffect,
  memo,
  useLayoutEffect,
} from 'react';
import * as echarts from 'echarts';
import moment from 'moment';
import { PageContainer } from '@ant-design/pro-layout';
import { Modal, Button, Typography, Switch, Input, Table } from 'antd';
import { connect } from 'dva';
import styles from './index.less';

class DataforCars extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      speedDatas: [],
      positionDatas: [],
      beginDate: null,
      endDate: null,
      bar1Data: [],
      bar2Data: [],
      lineData: [],
      visible: false,
      formLoading: false,
      alreadyDate: {
        beginDate: null,
        endDate: null,
      },
    };
    this.showModal = this.showModal.bind(this);
    this.handleOk = this.handleOk.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.handOnchange1 = this.handOnchange1.bind(this);
    this.handOnchange2 = this.handOnchange2.bind(this);
  }
  componentDidMount() {
    const d = new Date();
    d.setHours(d.getHours() - 1);
    console.log(d.getHours());
    const beginDate = moment(d).format('YYYY-MM-DD h:mm:ss');
    const endDate = moment(new Date()).format('YYYY-MM-DD h:mm:ss');
    this.setState({
      alreadyDate: {
        beginDate: beginDate,
        endDate: endDate,
      },
    });
    // const chartDom = document.getElementById('main');
    // let myChart = echarts.init(chartDom);

    // let option = {
    //     tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //             type: 'cross',
    //             crossStyle: {
    //                 color: '#999'
    //             }
    //         }
    //     },
    //     toolbox: {
    //         feature: {
    //             dataView: {show: true, readOnly: false},
    //             magicType: {show: true, type: ['line', 'bar']},
    //             restore: {show: true},
    //             saveAsImage: {show: true}
    //         }
    //     },
    //     legend: {
    //         data: ['蒸发量', '降水量', '平均温度']
    //     },
    //     xAxis: [
    //         {
    //             type: 'category',
    //             data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],//底部x轴数据
    //             axisPointer: {
    //                 type: 'shadow'
    //             }
    //         }
    //     ],
    //     yAxis: [
    //         {
    //             type: 'value',
    //             name: '水量',
    //             min: 0,
    //             max: 250,
    //             interval: 50,
    //             axisLabel: {
    //                 formatter: '{value} ml'//左边y轴
    //             }
    //         },
    //         {
    //             type: 'value',
    //             name: '温度',
    //             min: 0,
    //             max: 25,
    //             interval: 5,
    //             axisLabel: {
    //                 formatter: '{value} °C'//右边y轴
    //             }
    //         }
    //     ],
    //     series: [
    //         {
    //             name: '蒸发量',
    //             type: 'bar',
    //             data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]//左边第一个柱装图
    //         },
    //         {
    //             name: '降水量',
    //             type: 'bar',
    //             data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]//第二个
    //         },
    //         {
    //             name: '平均温度',
    //             type: 'line',
    //             yAxisIndex: 1,
    //             data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] //折线图数据
    //         }
    //     ]
    // };
    // option && myChart.setOption(option);
  }
  showModal() {
    this.setState({ visible: true });
  }
  handOnchange1(e) {
    console.log(e.target.value);
    this.setState({ beginDate: e.target.value });
  }
  handOnchange2(e) {
    console.log(e.target.value);
    this.setState({ endDate: e.target.value });
  }
  handleOk() {
    this.setState({ formLoading: true });
    const { dispatch } = this.props;
    const params = {
      //拿到输入的请求参数
      beginDate: this.state.beginDate,
      endDate: this.state.endDate,
      vehicleId: this.props.match.params.vehicleId,
    };
    // dispatch({
    //   //获取 历史位置信息
    //   type: 'dataforCars/reqHistoricalPositionByDate',
    //   payload: params,
    // });
    // dispatch({
    //   //获取油耗信息
    //   type: 'dataforCars/reqGetOilConsume',
    //   payload: params,
    // });
    setTimeout(() => {
      this.setState({ visible: false });
      this.setState({ formLoading: false });
      const chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ['蒸发量', '降水量', '平均温度'],
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '02:27',
              '02:29',
              '02:37',
              '05:07',
              '05:09',
              '07:09',
              '07:17',
              '10:27',
              '10:29',
              '13:27',
              '16:27',
              '16:39',
            ], //底部x轴数据
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '经度',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} °', //左边y轴
            },
          },
          {
            type: 'value',
            name: '纬度',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} °', //右边y轴
            },
          },
        ],
        series: [
          {
            name: '经度',
            type: 'bar',
            data: [30, 30, 30, 31, 29, 31, 31, 30, 32.6, 29, 30, 34], //左边第一个柱装图
          },
          {
            name: '纬度',
            type: 'bar',
            data: [101, 103, 103, 102, 100, 104, 105, 101, 102, 101, 106, 101], //第二个
          },
          {
            name: '油耗信息',
            type: 'line',
            yAxisIndex: 1,
            data: [30, 60, 90, 100, 120, 140, 200, 234, 239, 240, 245, 250], //折线图数据
          },
        ],
      };
      option && myChart.setOption(option);
    }, 2000);
  }
  handleCancel() {
    this.setState({ visible: false });
  }
  render() {
    console.log(this.props.dataCollection);
    return (
      <PageContainer
        header={{
          title: '车牌号',
          breadcrumb: {
            routes: [
              {
                path: '/vehicle',
                breadcrumbName: '车辆信息',
              },
              {
                path: '/vehicle/:vehicleId/forCars',
                breadcrumbName: '历史信息',
              },
            ],
          },
        }}
      >
        <Modal
          title="时间编辑"
          visible={this.state.visible}
          onOk={this.handleOk}
          confirmLoading={this.state.formLoading}
          onCancel={this.handleCancel}
        >
          <Input
            addonBefore="起始时间"
            onChange={this.handOnchange1}
            defaultValue={this.state.alreadyDate.beginDate}
          />
          <Input
            addonBefore="结束时间"
            onChange={this.handOnchange2}
            defaultValue={this.state.alreadyDate.endDate}
          />
        </Modal>
        <Button type="primary" onClick={this.showModal}>
          点击录入开始时间与结束时间
        </Button>
        <div id="main" className={styles.echartStyle}></div>
      </PageContainer>
    );
  }
}

export default connect(({ dataforCars }) => ({ dataforCars }))(DataforCars);
